<template>
  <div id="center">
     <div class="center-img-wrap">
        <div style="">
            <img src="../../assets/column/kj.png" class="center-img">
        </div>
     </div>
     <card>
      <div slot="content" class="card-padding">
        <p style="font-size:24px;line-height:1.2;">{{columnContentItem.columnContentTitle}}</p>
        <p style="color:#999;font-size:12px;padding-top:5px">发表于 {{columnContentItem.createTime}}</p>
      </div>
    </card>
    <card>
      <div slot="content" class="card-padding">
        <p style="font-size:14px;line-height:1.2;">
          {{columnContentItem.columnContent}}
        </p>
      </div>
    </card>
    <group style="margin-top:0px">
    <cell title="留言">
      <div>
        <span  @click="commentMain" style="color: rgb(16, 197, 182)">回复</span>
      </div>
    </cell>
    </group>
    <card>
      <div slot="content" class="card-padding">
        <div class="list-block media-list">
          <ul>
            <li class="list-block-li" v-for="(item, index) in comments">
                <div class="item-content">
                  <div class="item-media">
                    <img :src="item.commentImg" style='width: 2.2rem;height: 2.2rem;'>
                  </div>
                  <div class="item-inner">
                      <div class="userProfile">
                          <div class="item-title-row">
                          <div class="item-title">{{item.commentByName}}</div>
                          </div>
                          <!--<div class="item-subtitle" style="font-size: 0.75rem;">1天前</div>-->
                      </div>
                     <!-- <div class="userSchool">点赞</div>-->
                  </div>
                </div>
                <div style="margin-left: 2.8rem;" class="">
                    <div class="card-content">
                      <div class="card-content-inner">{{item.commentContent}}</div>
                      <div style="text-align:right;height: 20px;line-height: 20px;font-size: 10px;">
                        <span>{{item.commentTime | formatDate }}</span>
                        <span @click="commentOther(item.id, item.commentTargetUserId, index)" class="m-bar">回复</span>
                      </div>
                    </div>
                    <ul>
                      <li class="content-inner-li" v-for="(subItem, idx) in item.subComents">
                        <span  style="color: #10c5b6;">{{subItem.commentByName}}</span>
                        <span>回复</span>
                        <span  style="color: #10c5b6;">{{subItem.commentTargetUserName}}：</span>
                        <div class="card-content-inner">{{subItem.commentContent}}</div>

                        <div style="text-align:right;height: 20px;line-height: 20px;font-size: 10px;">
                          <span>2017-09-11 13:33</span> 
                          <span @click="commentOther(subItem.id,subItem.commentTargetUserId, index)" class="m-bar">回复</span>
                        </div>
                      </li>
                    </ul>
                </div>
            </li>
          </ul>
        </div>
      </div>
    </card>
    <div v-transfer-dom>
      <confirm v-model="show5"
      ref="confirm5"
      title="写你的留言"
      @on-cancel="onCancel"
      @on-confirm="onConfirm5"
      @on-show="onShow5"
      @on-hide="onHide">
      <div style="margin-top: 5px;">
        <textarea :value="content" id='commentContent' style ="padding: 5px;
          height: 80px;
          width: 90%;
          margin: 0 auto;"/>
      </div>
      </confirm>
    </div>
  </div>
</template>

<script>
import { Divider, Card, Group, Cell, CellBox, Confirm, TransferDom } from 'vux'
import { formatDate, getCustomerId, commentModule } from '../utils/utils'
import { getAuthInfo } from '../utils/common'

export default {
  filters: {
    formatDate (time) {
      let date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd hh:mm')
    }
  },
  directives: {
    TransferDom
  },
  components: {
    Card,
    Divider,
    Group,
    Cell,
    CellBox,
    Confirm
  },
  data () {
    return {
      columnContentItem: '',
      specialColumnContentId: '',
      show5: false,
      contentValue: '',
      comments: [],
      currentId: '',
      commentTargetUserId: '',
      type: '',
      customerId: getCustomerId(),
      index: 0
    }
  },
  created: function () {
    getAuthInfo('home')
  },
  computed: {
    content () {
      return this.contentValue
    }
  },
  beforeRouteLeave (to, from, next) {
    console.log('离开页面')
    this.$destroy(true)
    next(true)
  },
  mounted () {
    console.log('mounted')
    console.log(this.$router.currentRoute.query.id)
    let id = this.$router.currentRoute.query.id
    this.specialColumnContentId = id.toString()
    if (this.$router.history.current.path === '/specialColumn/columnContentList') {
      console.log('路径是一个specialColumn/columnContentList')
    }
    let config = {
      headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
      data: {
        'customerId': this.customerId,
        'specialColumnContentId': this.specialColumnContentId
      },
      responseType: 'json',
      method: 'post'
    }
    let self = this
    this.$ajax('api/cms/specialColumns/contentDetail', config).then(function (response) {
      console.log(response)
      self.columnContentItem = response.data.data
    }).catch(function (error) {
      console.log(error)
    })

    let config1 = {
      headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
      data: {
        'commentModuleNo': commentModule.specialColumn_columnContentDetail,
        'customerId': this.customerId,
        'commentTargetId': this.specialColumnContentId
      },
      responseType: 'json',
      method: 'post'
    }
    this.$ajax('api/cms/comments/queryMany', config1).then(function (response) {
      console.log(response)
      self.comments = response.data.data
    }).catch(function (error) {
      console.log(error)
    })
  },
  methods: {
    commentOther: function (id, commentTargetUserId, index) {
      this.index = index
      this.currentId = id
      this.commentTargetUserId = commentTargetUserId
      this.type = '2'
      console.log(id)
      this.show5 = true
    },
    commentMain: function () {
      this.currentId = null
      this.show5 = true
      this.type = '1'
    },
    onCancel () {
      console.log('on cancel')
    },
    onHide () {
      console.log('on hide')
    },
    onShow () {
      console.log('on show')
    },
    onShow5 () {
      this.$refs.confirm5.setInputValue('default')
    },
    onConfirm5 () {
      let commentContent = document.getElementById('commentContent').value
      console.log(commentContent)
      let self = this
      console.log(this.index)
      if (this.comments[this.index] === undefined) {
        this.commentTargetUserId = null
      } else {
        this.commentTargetUserId = this.comments[this.index].commentBy
      }
      let config1 = {
        headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
        data: {
          'commentModuleNo': commentModule.specialColumn_columnContentDetail,
          'customerId': this.customerId,
          'commentContent': commentContent,
          'commentTargetUserId': this.commentTargetUserId,
          'commentBy': this.customerId,
          'commentType': this.type,
          'commentTargetId': this.specialColumnContentId,
          'parentId': this.currentId
        },
        responseType: 'json',
        method: 'post'
      }
      this.$ajax('api/cms/comments/add', config1).then(function (response) {
        console.log(response.data.data)
        console.log(self.comments[self.index])
        console.log(response.data.data.parentId)
        if (response.data.data.parentId == null) {
          self.comments.unshift(response.data.data)
        } else {
          self.comments[self.index].subComents.push(response.data.data)
        }
      }).catch(function (error) {
        console.log(error)
      })
    }
  }
}
</script>

<style scoped lang="less">
@import '~vux/src/styles/1px.less';

.center-img-wrap{
    width:100%;
    height:150px;
    display:block;
}

.center-img{
    width: 100%;
    height: 150px;
    display: block;
    margin: 0 auto;
}

.card-demo-flex {
  display: flex;
}
.card-demo-content01 {
  padding: 10px 0;
}
.card-padding {
  padding: 10px;
}
.card-demo-flex > div {
  flex: 1;
  text-align: center;
  font-size: 12px;
}
.card-demo-flex span {
  color: #f74c31;
}

.list-block {
    margin: 0.75rem 0;
    font-size: 0.85rem;
}
.list-block ul {
    background: #fff;
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}
.list-block-li {
    box-sizing: border-box;
    position: relative;
    padding-bottom: 5px;
    border-bottom: dotted 1px rgb(16, 197, 182);
    margin-bottom: 10px;
}

.content-inner-li {
    border-top: dotted 1px rgb(194, 194, 194);
    padding-top: 3px;
}
.list-block .item-content {
    box-sizing: border-box;
    min-height: 2.0rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.list-block .item-media {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-shrink: 0;
    -ms-flex: 0 0 auto;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    -webkit-box-lines: single;
    -moz-box-lines: single;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    box-sizing: border-box;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.list-block.media-list .item-media img {
    display: block;
}
.list-block.media-list .item-inner {
    display: block;
    -webkit-align-self: stretch;
    align-self: stretch;
}

.list-block .item-media + .item-inner {
    margin-left: 0.55rem;
}

.list-block .item-inner {
    padding-right: 0.75rem;
    position: relative;
    width: 100%;
    min-height: 2.2rem;
    overflow: hidden;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.userProfile {
    float: left;
    line-height: 1.1rem;
    font-size: 0.75rem;
    font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.list-block.media-list .item-title-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.list-block.media-list .item-title {
    font-weight: 500;
}
.list-block .item-subtitle {
    font-size: 0.75rem;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
    text-overflow: ellipsis;
}
.userSchool {
    line-height: 2.2rem;
    float: right;
    font-size: 0.75rem;
    font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.m-bar{
    border-color: #10c5b6;
    padding: 5px 20px 5px 20px;
    cursor: pointer;
    padding: 1px 3px;
    display: block;
    width: 30px;
    font-size: 12px;
    float: right;
    height: 20px;
    line-height: 20px;
    color: #10c5b6;
}
.card-content-inner{
  padding-top:3px;
}
</style>
